<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">poster</view>
			<view class="tui-page__desc">生成分享海报</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="createPoster">商品海报</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx" @click="share">分享ThorUI</tui-button>
		</view>
		<canvas :style="{ width: winWidth + 'px', height: winHeight + 'px' }" canvas-id="posterId" id="posterId" class="tui-poster__canvas"></canvas>
		<tui-modal custom :show="show" backgroundColor="transparent" padding="0" @cancel="hideModal">
			<view class="tui-poster__box">
				<image src="/static/images/layout/icon_popup_closed.png" class="tui-close__img" @tap.stop="hideModal"></image>
				<image :src="posterImg" v-if="posterImg" class="tui-poster__img"></image>
				<tui-button type="danger" width="460rpx" height="80rpx" shape="circle" @click="savePic">保存图片</tui-button>
				<view class="tui-share__tips">保存图片到手机相册后，将图片分享到您的圈子</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import poster from '@/components/common/tui-poster/tui-poster.js'
	export default {
		data() {
			return {
				posterImg: '',
				winWidth: uni.upx2px(560 * 2),
				winHeight: uni.upx2px(890 * 2),
				show: false
			};
		},
		methods: {
			share() {
				this.tui.href('/pages/my/share/share');
			},
			async createPoster() {
				if (this.posterImg) {
					this.show = true;
					return;
				}
				uni.showLoading({
					mask: true,
					title: '图片生成中...'
				});
				let mainPic = await poster.getImage('https://thorui.cn/extend/common/img_book.jpg');
				let qrcode = await poster.getImage('https://thorui.cn/extend/share/applets.png');
				// #ifdef MP-WEIXIN
				await poster.removeSavedFile();
				// #endif
				if (mainPic && qrcode) {
					const imgs = {
						mainPic: mainPic,
						qrcode: qrcode
					};
					let text = '一个人的修养，看失意时的善良 陶瓷兔子 北京联合出版有限公司';
					poster.drawGoodsPoster('posterId', this.winWidth, this.winHeight, imgs, text, '36.50', '99.80', 'ThorUI示例小程序',
						res => {
							uni.hideLoading();
							if (res) {
								this.posterImg = res;
								setTimeout(() => {
									this.show = true;
								}, 60);
							} else {
								this.tui.toast('生成海报失败,请稍后再试');
							}
						});
				} else {
					uni.hideLoading();
					this.tui.toast('生成海报图片下载失败,请稍后再试');
				}
			},
			hideModal() {
				this.show = false;
			},
			savePic() {
				if (this.posterImg) {
					// #ifdef H5
					uni.previewImage({
						urls: [this.posterImg]
					});
					// #endif

					// #ifndef H5
					poster.saveImage(this.posterImg);
					// #endif

					this.hideModal();
				}
			}
		}
	};
</script>

<style>
	.tui-poster__canvas {
		background-color: #fff;
		position: absolute;
		left: -9999px;
	}

	.tui-poster__box {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tui-close__img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0;
		top: -60rpx;
	}

	.tui-poster__img {
		width: 560rpx;
		height: 890rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.tui-share__tips {
		font-size: 24rpx;
		transform: scale(0.8);
		transform-origin: center center;
		color: #ffffff;
		padding-top: 12rpx;
	}
</style>
